<template>
  <div class="topic">
    <div class="topicdetail">
      <p class="topicimgbox"><img :src="list.coverMobileUrl" alt="" /></p>
      <p class="title">#{{ list.title }}#</p>
      <p class="textp" v-if="list.text">{{ list.text[0] }}</p>
      <p class="textp" v-if="list.text">{{ list.text[1] }}</p>
      <p class="textp" v-if="list.text">{{ list.text[2] }}</p>
    </div>
  </div>
</template>

<script>
import { eventHotAPI } from "../../../../api/focus";
import axios from "../../../../axios/index";

export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取热门详情
    loaddetail() {
      let actId = this.$route.params.id;
      axios
        .get(`/topic/detail?actid=${actId}`, { withcredentials: true })
        .then((res) => {
          console.log(res);
          this.list = res.data.act;
        });
    },
    //获取热门信息
    async eventHot(actId) {
      const result = await eventHotAPI(actId);
      console.log(result);
    },
  },
  created() {
    const actId = this.$route.params.id;
    this.eventHot(actId);
    this.loaddetail();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.hot {
  padding: 10px;
  font-size: 14px;
  font-family: "黑体";
  font-weight: 30000;
}
img {
  width: 100%;
}
.title {
  padding: 10px;
  font-style: 16px;
  margin-bottom: 15px;
  color: #6c8099;
}
.topicdetail p {
  padding: 10px 10px;
}
.topicdetail img {
  width: 100%;
}
.textp {
  font-size: 12px;
  color: #727272;
  line-height: 30px;
}
</style>